<template>
  <div class="main">
    <el-tabs v-model="activeName" @tab-click="tabChange" class="tabs-content">
      <el-tab-pane label="未使用" name="1">
        <div class="tabs-wrapper">
          <div class="tabs-cards tabs-cards-first"  v-if="couponList.length > 0" v-for="item in couponList" :key="item.couponId" @click="goGoodsList">
            <div class="cards-left">
              <div class="left-content">
                ￥<span class="price">{{item.faceValue}}</span>
              </div>
              <div class="left-content">{{item.syThreshold}}</div>
            </div>
            <div class="cards-right">
              <p class="use">立即使用></p>
              <div class="right-content">
                <p><span></span>{{item.yxTimeStart}}-{{item.yxTimeEnd}}</p>
                <p><span></span>适用范围：{{item.rangeTitle}}</p>
              </div>
            </div>
          </div>
          <div class="tabs-cards-no" v-if="couponList.length === 0">
            暂无优惠券
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已过期" name="3">
        <div class="tabs-wrapper">
          <div class="tabs-cards tabs-cards-second" v-for="item in couponList" :key="item.couponId">
            <div class="cards-left">
              <div class="left-content">
                ￥<span class="price">{{item.faceValue}}</span>
              </div>
              <div class="left-content">{{item.syThreshold}}</div>
            </div>
            <div class="cards-right">
              <p class="use">立即使用></p>
              <div class="right-content">
                <p><span></span>{{item.yxTimeStart}}-{{item.yxTimeEnd}}</p>
                <p><span></span>适用范围：{{item.rangeTitle}}</p>
              </div>
            </div>
          </div>
          <div class="tabs-cards-no" v-if="couponList.length === 0">
            暂无优惠券
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已使用" name="2">
        <div class="tabs-wrapper">
          <div class="tabs-cards tabs-cards-third" v-for="item in couponList" :key="item.couponId">
            <div class="cards-left">
              <div class="left-content">
                ￥<span class="price">{{item.faceValue}}</span>
              </div>
              <div class="left-content">{{item.syThreshold}}</div>
            </div>
            <div class="cards-right">
              <p class="use">立即使用></p>
              <div class="right-content">
                <p><span></span>{{item.yxTimeStart}}-{{item.yxTimeEnd}}</p>
                <p><span></span>适用范围：{{item.rangeTitle}}</p>
              </div>
            </div>
          </div>
          <div class="tabs-cards-no" v-if="couponList.length === 0">
            暂无优惠券
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '1',
      couponStatus: '', // 1未启用 2已使用 3已过期
      couponList: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.couponStatus = '1'
      this.getCoupon()
    },
    tabChange (tab) {
      this.couponStatus = tab.name
      this.getCoupon()
    },
    getCoupon () {
      this.$http.post(this.$api + '/pc/coupon/myCoupons', {
        couponStatus: this.couponStatus
      }).then(res => {
        if (res.responseCode === '0000') {
          this.couponList = res.data
        }
      }).catch(() => {
        this.$message.error({
          message: '请求超时！'
        })
      })
    },
    // 页面跳转
    goGoodsList () {
      let time = Date.parse(new Date())
      this.$router.push('/goods/goodsList?time=' + time)
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/scss/basic.scss';
.tabs-content {
  .el-tabs__header{
    margin-bottom: 25px;
    .el-tabs__item{
      font-size: $fz_16;
      font-weight: bold;
    }
  }
}
.el-tabs__nav-wrap::after {
  height: 3px;
}
.el-tabs__item{
  color: $f_main;
}
.el-tabs__active-bar{
  height: 4px;
  bottom: 2px;
}
.tabs-wrapper {
  background: #ffffff;
  border: 1px solid $border_color;
  padding: 20px 0 20px 20px;
  display: flex;
  flex-wrap: wrap;
  .tabs-cards{
    width: 297px;
    height: 103px;
    display: flex;
    justify-content: space-between;
    margin:0 30px 20px 0;
    .cards-left {
      width: 105px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 25px 0 20px;
      .left-content{
        text-align: center;
        color: #ffffff;
        font-size: $fz_12;
        .price{
          font-weight: bold;
          font-size: $fz_20;
        }
      }
    }
    .cards-right {
      width: 188px;
      padding: 12px 8px;
      font-size: $fz_12;
      .use{
        color: $f_normal;
        text-align: right;
        padding-bottom: 16px;
      }
      .right-content{
        color: $f_main;
        p {
          height: 17px;
          padding:0 0 4px 4px;
          span{
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-right: 4px;
            border-radius: 3px;
            background: $success;
          }
        }
      }
    }
  }
  .tabs-cards-first{
    cursor: pointer;
    background: url('../../assets/images/coupons1.png') no-repeat;
  }
  .tabs-cards-second{
    cursor: not-allowed;
    background: url('../../assets/images/coupons2.png') no-repeat;
  }
  .tabs-cards-third{
    cursor: not-allowed;
    background: url('../../assets/images/coupons3.png') no-repeat;
  }
  .tabs-cards-no{
    width: 100%;
    text-align: center;
  }
}
</style>
